<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_Q2J2M0',
'ZY_GongSiGaiKuang_1',
'ZY_GongSiWenHua_2',
'ZY_GongSiGaiKuang_3',
'ZY_HuNanWanTaiShengWu_4',
'ZY_GongSiZhuYingRenCan_5',
'img_nMqy86',
'img_pCZSh7',
'ZY_YiRenWeiBen_8',
'img__nGVL9',
'ZY_ChengShiShouXin_10',
'img_prXPl11',
'ZY_ZhiLiangQuSheng_12',
'img_Enqht13',
'ZY_HeZuoGongYing_14',
'mobile_banner_img'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/swiper.min.css">
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/animate.css">
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <style>
   body{
    background: #f7f7f7;
   }
   .tab-content p{
    margin-bottom: 14px;
    font-size: 14px;
    color: #090909;
    line-height: 24px;
    text-indent: 2em;
    text-align: justify;
   }
   .tab-content img{
    max-width: 100%;
   }
   .company-desc{
    padding: 20px 20px;
    background: #ffffff;
   }
   /* 公司文化 */
   .list{
    margin: 0 -8px;
   }
   .list .item{
    width: 50%;
    padding: 0 8px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 15px;
   }
   .list .item .con{
    height: 220px;
    padding: 0 20px;
   }
   .list .item:nth-child(2n+1) .con{
    background:url('http://gwfile.csxuncong.com/wantaien/mobile/images/company/culture1.png') no-repeat center;
    background-size: cover;
   }
   .list .item:nth-child(2n+2) .con{
    background:url('http://gwfile.csxuncong.com/wantaien/mobile/images/company/culture2.png') no-repeat center;
    background-size: cover;
   }
   .list .item:nth-child(2n+3) .con{
    background:url('http://gwfile.csxuncong.com/wantaien/mobile/images/company/culture3.png') no-repeat center;
    background-size: cover;
   }
   .list .item:nth-child(2n+4) .con{
    background:url('http://gwfile.csxuncong.com/wantaien/mobile/images/company/culture4.png') no-repeat center;
    background-size: cover;
   }
   .list .item .icon{
    display: block;
    margin: 0 auto 12px;
    width: 50px;
   }
   .list .item .desc{
    color: #ffffff;
    font-size: 16px;
    line-height: 26px;
   }
  </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <img src="${mobile_banner_img.adImg}" class="img zy" data-type="ad" data-id="${mobile_banner_img.adId}">
  </div> 
  <div class="tab"> 
    <span class="tab-item zy" data-type="ad" data-id="${ZY_GongSiGaiKuang_1.adId}">${ZY_GongSiGaiKuang_1.adTitle}</span>
    <span class="tab-item zy" data-type="ad" data-id="${ZY_GongSiWenHua_2.adId}">${ZY_GongSiWenHua_2.adTitle}</span> 
  </div>
  <div class="container"> 
   <!-- 公司概况 --> 
   <div class="tab-content hide"> 
    <div class="company-desc"> 
     <div class="flex align-center animate__animated animate__fadeInUp"> 
      <h3 class="title zy" data-type="ad" data-id="${ZY_GongSiGaiKuang_3.adId}">${ZY_GongSiGaiKuang_3.adTitle}</h3> 
     </div> 
     <div class="animate__animated animate__fadeInUp"> 
      <p class="zy" data-type="ad" data-id="${ZY_HuNanWanTaiShengWu_4.adId}">${ZY_HuNanWanTaiShengWu_4.adTitle}</p> 
      <p class="zy" data-type="ad" data-id="${ZY_GongSiZhuYingRenCan_5.adId}">${ZY_GongSiZhuYingRenCan_5.adTitle}</p> 
      <img src="${img_nMqy86.adImg}" class="zy" data-type="ad" data-id="${img_nMqy86.adId}"> 
     </div> 
    </div> 
   </div> 
   <!-- 公司文化 --> 
   <div class="tab-content hide"> 
    <div class="list flex flex-wrap animate__animated animate__fadeInUp"> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_pCZSh7.adImg}" class="icon zy" data-type="ad" data-id="${img_pCZSh7.adId}"> 
       <p class="desc zy" data-type="ad" data-id="${ZY_YiRenWeiBen_8.adId}">${ZY_YiRenWeiBen_8.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img__nGVL9.adImg}" class="icon zy" data-type="ad" data-id="${img__nGVL9.adId}"> 
       <p class="desc zy" data-type="ad" data-id="${ZY_ChengShiShouXin_10.adId}">${ZY_ChengShiShouXin_10.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_prXPl11.adImg}" class="icon zy" data-type="ad" data-id="${img_prXPl11.adId}"> 
       <p class="desc zy" data-type="ad" data-id="${ZY_ZhiLiangQuSheng_12.adId}">${ZY_ZhiLiangQuSheng_12.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_Enqht13.adImg}" class="icon zy" data-type="ad" data-id="${img_Enqht13.adId}"> 
       <p class="desc zy" data-type="ad" data-id="${ZY_HeZuoGongYing_14.adId}">${ZY_HeZuoGongYing_14.adTitle}</p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="http://gwfile.csxuncong.com/wantaien/mobile/js/swiper.min.js"></script>
  <script>
         window.onload = function(){
            var itemEls = document.getElementsByClassName('tab-item');
            var contentEls = document.getElementsByClassName('tab-content');

            var type = getQueryVariable('type') || 0;
            tabChange(type)

            for(var i= 0; i < itemEls.length;i++){
                let index = i;
                itemEls[i].onclick = tabChange.bind(this, index)
            }
            function tabChange(index){
                for(var i= 0; i < itemEls.length;i++){
                    itemEls[i].className="tab-item";
                    contentEls[i].className="tab-content hide";
                }
                itemEls[index].className="tab-item active";
                contentEls[index].className="tab-content";
            }

            function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
         }
    </script>

  <script>
   var menuIcon = document.getElementById('menuIcon');
   var headerNav = document.getElementById('headerNav');
   var closeNav = document.getElementById('closeNav');
   menuIcon.addEventListener('click', function () {
    headerNav.style.display = "block";
   }, false)
   closeNav.addEventListener('click', function () {
    headerNav.style.display = "none";
   }, false)
  </script>
 </body>
</html>